<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 旋转变形:将transform属性的值设置为rotate()即可实现。 */
        /* transform:rotate(45deg); */
        /* 若角度为正，则顺时针方向旋转，否则逆时针方向旋转。 */
        /* 默认情况下，以中心点为原点进行旋转。即钉子钉在中心。 */
        /* transform-origin:设置自己的自定义变换原点。相当于改变钉子放置的地点。 */
        /* transform-origin实际上用的不多 */
        /* 变形后的位置仍然是占有自己原来的位置。但是影子会变大，可能会压到别人。 */
        img.i1{
            border: 1px solid #000;
            transform: rotate(10deg);
        }
        img.i2{
            border: 1px solid #000;
            transform: rotate(-10deg);
        }
        img.i3{
            border: 1px solid #000;
            transform: rotate(90deg);
        }
        img.i4{
            border: 1px solid #000;
            transform: rotate(369deg);
        }
        img.i5{
            border: 1px solid #000;
            transform: rotate(30deg);
        }
        img.i6{
            border: 1px solid #000;
            transform: rotate(30deg);
            /* 以左上角为原点进行旋转。 */
            transform-origin:0 0;
        }

    </style>
</head>
<body>
    <p><img src="2.png" alt="" class="i1"></p>
    <p><img src="2.png" alt="" class="i2"></p>
    <p><img src="2.png" alt="" class="i3"></p>
    <p><img src="2.png" alt="" class="i4"></p>
    <p><img src="2.png" alt="" class="i5"></p>
    <p><img src="2.png" alt="" class="i6"></p>
</body>
</html>